<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="css/index.css">
    <script src="js/vue.js"></script>
    <script src="js/index.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="/js/axios-interceptor.js"></script>
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="24">
            <h2><em style="color: red">班级平均期望工资：{{avgSalary}}</em></h2>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
            <el-tag style="font-size: 20px;" type="success">期望薪资分布：</el-tag>
            <div id="salaryAll" style="width: 100%;height:400px;"></div>
        </el-col>
        <el-col :span="12">
            <el-tag style="font-size: 20px;" type="success">期望薪资组成：</el-tag>
            <div id="salary" style="width: 100%;height:400px;"></div>
        </el-col>
    </el-row>

    <el-row>
        <el-col :span="12">
            <el-tag style="font-size: 20px;" type="success">学历组成：</el-tag>
            <div id="education" style="width: 600px;height:400px;"></div>
        </el-col>
        <el-col :span="12">
            <el-tag style="font-size: 20px;" type="success">工作年限组成：</el-tag>
            <div id="workTime" style="width: 600px;height:400px;"></div>
        </el-col>
    </el-row>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->



</div>


</body>
<script>
    new Vue({
        el:"#app",
        data:{
            avgSalary:0
        },
        methods:{

        },
        mounted(){
            let _this = this;
            axios.get("/stu/statics").then(function (res) {

                _this.avgSalary = res.data.data.avgSalary;

                // 基于准备好的dom，初始化echarts实例
                var educationChart = echarts.init(document.getElementById('education'));
                // 指定图表的配置项和数据
                var educationOption =  {
                    title: {
                        text: '学历分析',
                        subtext: '占比(%)',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    /* legend: {
                         orient: 'vertical',
                         left: 'left'
                     },*/
                    series: [
                        {
                            name: '学历',
                            type: 'pie',
                            radius: '50%',
                            data: res.data.data.education,
                            label : {
                                normal : {
                                    formatter: '{b}:{c}: ({d}%)',
                                    textStyle : {
                                        fontWeight : 'normal',
                                        fontSize : 15
                                    }
                                }
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                educationChart.setOption(educationOption);


                // 基于准备好的dom，初始化echarts实例
                var workTimeChart = echarts.init(document.getElementById('workTime'));
                // 指定图表的配置项和数据
                var workTimeOption =  {
                    title: {
                        text: '工作年限分析',
                        subtext: '占比(%)',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    /*        legend: {
                                orient: 'vertical',
                                left: 'left'
                            },*/
                    series: [
                        {
                            name: '工作年限',
                            type: 'pie',
                            radius: '50%',
                            data: res.data.data.workTime,
                            label : {
                                normal : {
                                    formatter: '{b}:{c}: ({d}%)',
                                    textStyle : {
                                        fontWeight : 'normal',
                                        fontSize : 15
                                    }
                                }
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                workTimeChart.setOption(workTimeOption);


                // 基于准备好的dom，初始化echarts实例
                var salaryChart = echarts.init(document.getElementById('salary'));
                // 指定图表的配置项和数据
                var salaryOption =  {
                    xAxis: {
                        type: 'category',
                        data: res.data.data.salaryList
                    },
                    yAxis: {
                        type: 'value',
                        name:"人数"
                    },
                    series: [
                        {
                            data: res.data.data.salaryCount,
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, //开启显示数值
                                        position: 'top', //数值在上方显示
                                        textStyle: {  //数值样式
                                            color: '#D1DBFF',   //字体颜色
                                            fontSize: 14  //字体大小
                                        }
                                    }
                                }
                            }
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                salaryChart.setOption(salaryOption);


                // 基于准备好的dom，初始化echarts实例
                var salaryAllChart = echarts.init(document.getElementById('salaryAll'));
                // 指定图表的配置项和数据
                var salaryAllOption =   {
                    xAxis: {},
                    yAxis: {},
                    series: res.data.data.salaryAll
                };
                // 使用刚指定的配置项和数据显示图表。
                salaryAllChart.setOption(salaryAllOption);
            });
        }
    });
</script>
<script type="text/javascript">

</script>
</html>
